<template>
  <el-main>
    <center><h3>收房合同续约</h3></center>
    <h4><el-button type="warning" size="mini" icon="el-icon-star-off" circle></el-button>&emsp;房产信息&emsp;
      <el-button
        size="mini"
        round
        type="warning"
        @click="dialogVisible = true">收房合同查询
      </el-button></h4>
    <el-dialog
      title="收房合同列表"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
          <span>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column label="业主" align="center" prop="ownerName"/>
              <el-table-column label="房产信息" align="center" prop="houseName"/>
              <el-table-column label="签约日期" align="center" prop="conInfoTime"/>
              <el-table-column label="操作" align="center">
              <template slot-scope="scope">
               <el-tag type="danger" @click="selectById(scope.row)"><i class="el-icon-check">&emsp;选中</i></el-tag>
              </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"/>
          </span>

    </el-dialog>

    <hr>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="小区名称"  label-width="150px" prop="premiseName">
              <el-input v-model="form.premiseName" disabled="disabled" style="width: 200px" placeholder="请输入小区名"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="房产信息" label-width="150px" prop="houseName">
              <el-input v-model="form.houseName" disabled="disabled" style="width: 200px" placeholder="请输入房产信息"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">

            <el-form-item label="所有权类型" label-width="150px"
                          prop="houseType">
              <el-select v-model="form.houseType"
                         placeholder="请选择所有权类型">
                <el-option label="国有房产" value="1"/>
                <el-option label="直管房产" value="2"/>
                <el-option label="自管房产" value="3"/>
                <el-option label="军队房产" value="5"/>
                <el-option label="集体所有房产" value="6"/>
                <el-option label="私有(自由)房产" value="7"/>
                <el-option label="港、澳、台投资房产" value="8"/>
                <el-option label="涉外房产" value="9"/>
                <el-option label="其它房产" value="10"/>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="房产证书编号" label-width="150px" prop="houseZsNo">
              <el-input v-model="form.houseZsNo" style="width: 200px" placeholder="请输入房产证书编号"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="产权地址" label-width="150px" prop="cqAddress">
              <el-input v-model="form.cqAddress" style="width: 200px" placeholder="请输入产权地址"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <h4><el-button type="warning" size="mini" icon="el-icon-star-off" circle></el-button>&emsp;业主信息&emsp;</h4>
      <hr>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="业主姓名" label-width="150px" prop="ownerName">
              <el-input v-model="form.ownerName" style="width: 200px" placeholder="请输入业主姓名"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="业主证件号码" label-width="150px" prop="ownerIdCard">
              <el-input v-model="form.ownerIdCard" style="width: 200px" placeholder="请输入业主证件号码"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="业主手机号" label-width="150px" prop="ownerMobile">
              <el-input v-model="form.ownerMobile" style="width: 200px" placeholder="请输入业主手机号"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="业主联系地址" label-width="150px" prop="ownerContactAddress">
              <el-input v-model="form.ownerContactAddress" style="width: 200px" placeholder="请输入业主联系地址"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="签约人(甲方)" label-width="150px" prop="signUserName">
              <el-input v-model="form.signUserName" style="width: 200px" placeholder="请输入签约人(甲方)"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="签约人证件号" label-width="150px" prop="signUserIdCard">
              <el-input v-model="form.signUserIdCard" style="width: 200px" placeholder="请输入签约人证件号"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="签约人手机号" label-width="150px" prop="signUserMobile">
              <el-input v-model="form.signUserMobile" style="width: 200px" placeholder="请输入签约人手机号"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="紧急联系电话" label-width="150px" prop="signUserEmergencyPhone">
              <el-input v-model="form.signUserEmergencyPhone" style="width: 200px" placeholder="请输入紧急联系电话"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="银行账户类型" label-width="150px" prop="accountType">
              <el-select v-model="form.accountType" style="width: 200px" placeholder="请选择银行账户类型">
                <el-option label="对公类型" value="1"/>
                <el-option label="对私类型" value="2"/>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <h4><el-button type="warning" size="mini" icon="el-icon-star-off" circle></el-button>&emsp;租约信息&emsp;</h4>
      <hr>
      <el-row>
        <el-col :span="6">
          <!--          <div class="grid-content bg-purple-dark">-->
          <!--            &emsp;&emsp;&emsp;&emsp;&emsp;-->
          <!--            <el-form-item label="租约期限">-->
          <!--              <el-date-picker clearable size="small" style="width: 100px"-->
          <!--                              v-model="form.leaseStartTime"-->
          <!--                              value-format="yyyy/MM/dd"-->
          <!--                              placeholder="">-->
          <!--              </el-date-picker>-->
          <!--              至-->
          <!--              <el-date-picker clearable size="small" style="width: 100px"-->
          <!--                              v-model="form.leaseEndTime"-->
          <!--                              value-format="yyyy/MM/dd"-->
          <!--                              placeholder="">-->
          <!--              </el-date-picker>-->
          <!--            </el-form-item>-->
          <!--          </div>-->
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">
            <el-form-item label="业务员" label-width="150px" prop="sfUserName">
              <el-input v-model="form.sfUserName" style="width: 200px" placeholder="请输入业务员"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="租金" label-width="150px" prop="monthRent">
              <el-input v-model="form.monthRent" style="width: 200px" placeholder="请输入收房月租金"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="房产押金" label-width="150px" prop="depositMoney">
              <el-input v-model="form.depositMoney" style="width: 200px" placeholder="请输入房产押金"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="支付">
              押
              <el-select v-model="form.depositType" style="width: 60px" placeholder="">
                <el-option value="1"/>
                <el-option value="2"/>
                <el-option value="3"/>
                <el-option value="4"/>
              </el-select>
              付
              <el-select v-model="form.paymentType" style="width: 60px" placeholder="">
                <el-option value="1"/>
                <el-option value="2"/>
                <el-option value="3"/>
                <el-option value="4"/>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="6" style="width: 400px"  v-model="form.remark" placeholder="请输入备注"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <center>
        <el-button type="warning" round @click="">取消</el-button>
        <el-button type="warning" round @click="submit">保存</el-button>
      </center>
    </el-form>

  </el-main>

</template>

<script>
import {listContract, updateContract} from "@/api/renting/contract";
export default {
  name: "update",
  components: {},
  data() {
    return {
      total: 0,
      dialogVisible: false,
      form: {},
      options: [],
      experienceData: [],
      bonuspenaltyData: [],
      AnnualAssessmentData: [],
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      ruleForm:{
        premiseName: '',
        houseName: '',
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    selectById(row) {
      this.ruleForm = row
      this.dialogVisible = false
    },
    getList() {
      listContract(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    submit() {
      addContract(this.form).then(response => {
          this.msgSuccess("新增成功");
          this.form = {}
          this.$router.push("list")
        }
      )
    },
  }
};
</script>


<style scoped>

</style>
